import React from 'react';
import * as MenuItemStyle from './MenuItem.less';
import cx from 'classnames';

export default class MenuItem extends React.Component {
	static propTypes = {
		primaryText: React.PropTypes.string.isRequired,
		icon: React.PropTypes.string,
		onClick: React.PropTypes.func
	};

	constructor(props) {
		super(props);
	}

	handleClick = (event) => {
		let { path, onClick } = this.props; 
		onClick && onClick(path);
	};

	render() {
		let { children, primaryText, icon, isSelected, ...others } = this.props;

		return (
			<div {...others} className={cx(MenuItemStyle.menuItem, {'selected': isSelected})} onClick={this.handleClick}>
				{icon && <img className='icon' src={icon} />}
				<span>{primaryText}</span>
				{children}
			</div>
		);
	}
}